<template>
  <div>
    <el-row>
      <el-col :span="24" style="margin-bottom:10px;">
        <el-row style="font-size:14px;">
          <el-col :span="24" style="padding-left:20px;margin-bottom:10px;">
            当前录音：{{playname1}}<span style="color:#999">{{playname2}}</span>
          </el-col>
        </el-row>
        <audio :src="mp3src" controls style="width:100%"></audio>
        <!-- <a :href="mp3src" target="_blank">外部测试一下</a> -->
      </el-col>
      <el-col :span="24">
        <div class="handle-box">
          <el-date-picker v-model="query.time" class="mr10" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                          value-format="yyyy-MM-dd"></el-date-picker>
          <el-input class="mr10" v-model="query.kw" placeholder="请输入客户姓名/手机号/业务经理" style="width:300px"></el-input>
          <el-button type="primary" size="small" @click="souClick">搜索</el-button>
        </div>
        <el-table v-loading="tableLoad" :data="tableData" border class="table" style="width: 100%" ref="multipleTable"
                  header-cell-class-name="table-header">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
          <el-table-column property="name" label="客户姓名">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="drawerStateClick(scope.row.cusId)">
                {{scope.row.cusName}}</el-link>
            </template>
          </el-table-column>
          <el-table-column property="cusPhone" label="客户手机号"></el-table-column>
          <el-table-column property="userName" label="业务经理"></el-table-column>
          <el-table-column property="createTime" label="创建时间"></el-table-column>
          <el-table-column property="recordUrl" label="通话录音">
            <template slot-scope="scope">
              <el-link icon="el-icon-video-play" type="primary" :underline="false" @click="audioplay(scope.row)">点击播放</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination background layout="total,prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.totalCount"
                         @current-change="handlePageChange" @prev-click="handlePageChange" @next-click="handlePageChange"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTelaudio } from '../../../../api/index';

export default {
  data() {
    return {
      query: {
        page: 1,
        limit: 10,
        time: [],
        kw: '',
        totalCount: 0,
      },
      tableLoad: false,
      tableData: [],
      playname1: '',
      playname2: '',
      mp3src: ''
    };
  },
  props: ['activeId', 'time'],
  created() {
    this.query.time = [this.time, this.time];
    this.getData();
  },
  methods: {
    //获取列表数据
    getData() {
      this.tableLoad = true;
      getTelaudio({
        page: this.query.page,
        limit: this.query.limit,
        userId: this.activeId,
        startTime: this.query.time ? this.query.time[0] + ' 00:00:00' : '',
        endTime: this.query.time ? this.query.time[1] + ' 24:00:00' : '',
        kw: this.query.kw
      }).then((res) => {
        this.tableLoad = false;
        if (res.code === 0) {
          this.tableData = res.recordList;
          this.query.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      });
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1
    },
    // 分页
    handlePageChange(page) {
      this.query.page = page;
      this.getData();
    },
    //搜索
    souClick() {
      this.query.page = 1;
      this.getData();
    },
    //点击播放
    audioplay(item) {
      // this.$message('调试中，稍后再试');
      this.playname1 = `${item.cusName} - `;
      this.playname2 = `${item.userName} / ${item.createTime}`;
      this.mp3src = item.recordUrl;
    }
  },
  mounted() {

  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-icon-star-on >>> .el-loading-spinner {
    margin-top: -10px;
}
.IconColor {
    color: #e6a23c;
}
/deep/ :focus {
    outline: 0;
}
.el-drawer__title {
    color: #72767b;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 25px;
    padding: 20px 35px 0;
}
.el-drawer__title span {
    font-size: 14px;
    color: #66b1ff;
    margin: 20px;
    cursor: pointer;
}
.el-radio {
    margin-right: 0px;
}
.beizhu_text {
    height: 794px;
    overflow: auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-left: 35px;
    padding: 20px;
    box-sizing: border-box;
    color: #72767b;
    font-size: 14px;
}
.beizhu_text > div:first-child {
    padding-top: 0;
}
.beizhu_text > div {
    padding: 5px 0;
}
.el-icon-star-on {
    font-size: 20px;
}
</style>
